<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pango</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, PyGTK, Pango, Python, programming, Linux">
<meta name="description" content="Pango">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Pango</h1>

<p>
In this part of the PyGTK programming tutorial, we will explore the Pango library.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

<p>
Pango is a free and open source computing library for rendering 
internationalized texts in high quality. Different font backends 
can be used, allowing cross-platform support. (wikipedia)
</p>

<p>
Pango provides advanced font and text handling that is used 
for <b>Gdk</b> and <b>Gtk</b>. 
</p>

<h2>Simple example</h2>

<p>
In our first example, we show, how to change font for our label widget.   
</p>

<div class="codehead">quotes.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows how to modify
# the font of a label
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk
import pango

quotes = """Excess of joy is harder to bear than any amount of sorrow.
The more one judges, the less one loves.
There is no such thing as a great talent without great will power. 
"""


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        self.set_title("Quotes")
        
        label = gtk.Label(quotes)
        gtk.gdk.beep()

        fontdesc = pango.FontDescription("Purisa 10")
        label.modify_font(fontdesc)

        fix = gtk.Fixed()

        fix.put(label, 5, 5)
        
        self.add(fix)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()

PyApp()
gtk.main()
</pre>

<p>
In the above code example, we have a label widget with three quotations. 
We change it's font to Purisa 10.
</p>

<pre class="explanation">
 quotes = """Excess of joy is harder to bear than any amount of sorrow.
 The more one judges, the less one loves.
 There is no such thing as a great talent without great will power. 
"""
</pre>

<p>
This is the text to show in the label.
</p>

<pre class="explanation">
 fontdesc = pango.FontDescription("Purisa 10")
</pre>

<p>
The <b class="keyword">FontDescription</b> is used to specify
the characteristics of a font.
</p>

<pre class="explanation">
 label.modify_font(fontdesc)
</pre>

<p>
We change the font of the label widget to Purisa 10.
</p>


<br>
<img src="/img/gui/pygtk/quotations.png" alt="Quotations">
<div class="figure">Figure: Quotations</div>
<br>

<h2>System fonts</h2>

<p>
The next code example shows all available fonts in a 
<b class="keyword">TreeView</b> widget. 
</p>

<div class="codehead">systemfonts.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example lists all available
# fonts on a system in a TreeView widget
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import pango


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_size_request(350, 250)
        self.set_border_width(8)
        self.connect("destroy", gtk.main_quit)
        self.set_title("System fonts")
        
        sw = gtk.ScrolledWindow()
        sw.set_shadow_type(gtk.SHADOW_ETCHED_IN)
        sw.set_policy(gtk.POLICY_AUTOMATIC, gtk.POLICY_AUTOMATIC)
        
        context = self.create_pango_context()
        self.fam = context.list_families()

        store = self.create_model()

        treeView = gtk.TreeView(store)
        treeView.set_rules_hint(True)
        sw.add(treeView)

        self.create_column(treeView)

        self.add(sw)
        
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()


    def create_column(self, treeView):
        rendererText = gtk.CellRendererText()
        column = gtk.TreeViewColumn("FontName", rendererText, text=0)
        column.set_sort_column_id(0)    
        treeView.append_column(column)
    
    def create_model(self):
        store = gtk.ListStore(str)

        for ff in self.fam:
            store.append([ff.get_name()])

        return store
    

PyApp()
gtk.main()
</pre>

<p>
The code example shows all available fonts on a system.
</p>

<pre class="explanation">
 context = self.create_pango_context()
</pre>

<p>
This code line creates a pango context object. 
It contains global information about the rendering process of text. 
</p>

<pre class="explanation">
 self.fam = context.list_families()
</pre>

<p>
From the context object, we retrieve all available font families. 
</p>

<pre class="explanation">
 for ff in self.fam:
     store.append([ff.get_name()])
</pre>

<p>
During the model creation of the <b class="keyword">TreeView</b> widget, 
we get all font names from the array of font families and put them 
into the list store. 
</p>


<br>
<img src="/img/gui/pygtk/systemfonts.png" alt="System fonts">
<div class="figure">Figure: System fonts</div>
<br>

<h2>Unicode</h2>

<p>
Pango is used to work with internationalized text. 
</p>

<div class="codehead">unicode.py</div> 
<pre class="code">
#!/usr/bin/python
# -*- coding: utf-8 -*-

# ZetCode PyGTK tutorial 
#
# This example displays text
# in azbuka
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import pango


obj = unicode(u'''Фёдор Михайлович Достоевский родился 30 октября (11 ноября)
1821 года в Москве. Был вторым из 7 детей. Отец, Михаил Андреевич, 
работал вгоспитале для бедных. Мать, Мария Фёдоровна 
(в девичестве Нечаева), происходила из купеческого рода.''')


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        self.set_title("Unicode")
        
        label = gtk.Label(obj.encode('utf-8'))

        fontdesc = pango.FontDescription("Purisa 10")
        label.modify_font(fontdesc)

        fix = gtk.Fixed()

        fix.put(label, 5, 5)
        
        self.add(fix)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()

PyApp()
gtk.main()
</pre>

<p>
We show some text in azbuka. 
</p>

<pre class="explanation">
 # -*- coding: utf-8 -*-
</pre>

<p>
In order to work directly with internationalized text
in the source code, we must provide this magic comment.
Note, that it must be on the first or the second line. 
</p>

<pre class="explanation">
 obj = unicode(u'''Фёдор Михайлович Достоевский родился 30 октября (11 ноября)
1821 года в Москве. Был вторым из 7 детей. Отец, Михаил Андреевич, 
работал вгоспитале для бедных. Мать, Мария Фёдоровна 
(в девичестве Нечаева), происходила из купеческого рода.''')
</pre>

<p>
This is text in azbuka.
</p>


<pre class="explanation">
 Label label = new Label(text);
</pre>

<p>
We put encoded text into the label.  
</p>

<br>
<img src="/img/gui/pygtk/unicode.png" alt="Unicode">
<div class="figure">Figure: Unicode</div>
<br>


<h2>Attributes</h2>

<p>
Pango attribute is an attribute that applies to a section of text.
</p>

<div class="codehead">attributes.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# In this program we work with
# pango attributes
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009

import gtk
import pango

text = "Valour fate kinship darkness"


class PyApp(gtk.Window): 
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        self.set_title("Attributes")
        
        label = gtk.Label(text)

        attr = pango.AttrList()
        
        fg_color = pango.AttrForeground(65535, 0, 0, 0, 6)
        underline = pango.AttrUnderline(pango.UNDERLINE_DOUBLE, 7, 11)
        bg_color = pango.AttrBackground(40000, 40000, 40000, 12, 19)
        strike = pango.AttrStrikethrough(True, 20, 29)
        size = pango.AttrSize(30000, 0, -1)

        attr.insert(fg_color)
        attr.insert(underline)
        attr.insert(bg_color)
        attr.insert(size)
        attr.insert(strike)

        label.set_attributes(attr)

        fix = gtk.Fixed()

        fix.put(label, 5, 5)
        
        self.add(fix)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show_all()

PyApp()
gtk.main()
</pre>

<p>
In the code example we show four different attributes applied 
on the text. 
</p>

<pre class="explanation">
 attr = pango.AttrList()
</pre>

<p>
Pango attribute list is an object for holding attributes.
</p>

<pre class="explanation">
 fg_color = pango.AttrForeground(65535, 0, 0, 0, 6)
</pre>

<p>
Here we create an attribute that will render text in red color. 
The first three parameters are the R, G, B values of a color.
The last two parameters are the start and end indexes of the
text, to which we apply this attribute. 
</p>

<pre class="explanation">
 label.set_attributes(attr)
</pre>

<p>
We set the list of attributes for the label. 
</p>


<br>
<img src="/img/gui/pygtk/attributes.png" alt="Pango attributes">
<div class="figure">Figure: Pango attributes</div>

<hr class="btm">

<p>
In this chapter of the PyGTK programming library, we worked with
pango library.
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified February 8, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
